import High from "@/comps/High";
import OffAutoComplete from "@/comps/OffAutoComplete";
import { selectRoot } from "@/store/rootSlice";
import * as bs from '@/util/bs';
import { log } from "@/util/tio";
import { Button, Form, Input, Link, Space, Typography } from '@arco-design/web-react';
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";


const FormItem = Form.Item;



function LoginDemo() {

  const root = useSelector(selectRoot);
  const dispatch = useDispatch();

  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [])


  return (
    <div>
      <Space wrap>
        <Form
          form={form}
          style={{ width: 600 }}
          autoComplete="off"
          // wrapperCol={{
          //   span: 24
          // }}
          onValuesChange={(v, vs) => {
            log(v, vs);
          }}
          onSubmit={async (v) => {
            log(v);
            await bs.login(v, { dispatch }, ({ ok, data, code, msg }) => { })
          }}
        >
          <OffAutoComplete></OffAutoComplete>


          {/* 设置控件初始值.(初始值，请不要使用受控组件的defaultValue了) */}
          <FormItem field='loginname'
            initialValue=''
            label="谭聊帐号"
            rules={[{ required: true, message: 'username is required' }]}>
            <Input placeholder='输入你的谭聊帐号：手机号' />
          </FormItem>
          <FormItem initialValue='' label="谭聊密码" field='pwd'
            rules={[{ required: true, message: 'password is required' }]}
          >
            <Input.Password placeholder='输入你的谭聊帐号密码' autoComplete="off" />
          </FormItem>

          <FormItem wrapperCol={{ offset: 5 }}>
            <Typography.Text type='secondary'>
              如果没有谭聊帐号，可以<Link href="https://www.tiocloud.com/tioim/login" target="_blank">点击注册</Link>
            </Typography.Text>
          </FormItem>

          <FormItem
            wrapperCol={{
              offset: 5,
            }}
          >
            <Space size='medium'>
              <Button
                type='primary'
                htmlType='submit'
              >
                登 录
              </Button>

              <Button
                onClick={async () => {
                  const resp = await bs.logout({ dispatch }, ({ ok, data, code, msg }) => { });
                }}
              >
                退出登录
              </Button>

              <Button
                onClick={() => {
                  form.resetFields();
                }}
              >
                Reset
              </Button>
            </Space>
          </FormItem>
        </Form>
      </Space>

      <High language="json" showLineNumbers>
        {JSON.stringify(root.curr, null, 2)}
      </High>
    </div>
  );
}
export default LoginDemo;
